<template>
  <div class="about">
    <img src="../assets/logo.png" />
    <div>
      <h5>Name:<span>PXDragon</span></h5>
      <h5>version:<span>0.0.1</span></h5>
      <h5>Author:<span>jsmask</span></h5>
      <h5>
        More:
        <ul>
          <li @click="toLink('https://github.com/jsmask')"><img src="../assets/more/github.jpg" alt="" /></li>
          <li @click="toLink('https://gitee.com/jsmask')"><img src="../assets/more/gitee.png" alt="" /></li>
          <li @click="toLink('https://jsmask.gitee.io/note_blob/')"><img src="../assets/more/face.png" alt="" /></li>
        </ul>
      </h5>
    </div>
  </div>
</template>

<script>
export default {
  name: "About",
  props: {
    onClose: {
      type: Function,
      default: null,
    },
  },
  data() {
    return {};
  },
  watch: {},
  mounted() {},
  methods: {
      toLink(url){
          window.open(url,"_blank");
      }
  },
};
</script>

<style scoped lang="scss">
$color: rgb(209, 115, 247);
.about {
  display: flex;
  box-sizing: border-box;
  padding: 10px 30px;
  align-items: center;
  & > img {
    width: 30%;
    height: auto;
    margin-right: 10%;
    box-shadow: 0 0 10px $color, 0 0 20px $color, 0 0 40px $color,
      0 0 60px $color, 0 0 80px $color, 0 0 100px $color;
    background: $color;
    border-radius: 50%;
  }
  & > div {
    flex: 1;
    box-sizing: border-box;
    color: #fff;
    font-family: "Oswald";
    text-transform: uppercase;
    h5 {
      font-size: 14px;
      display: flex;
      align-items: center;
      span {
        font-size: inherit;
        margin-left: 15px;
      }
      &:not(:last-of-type) {
        margin-bottom: 15px;
      }
      & > ul {
        display: flex;
        margin-left: 15px;
        li {
          margin-right: 7px;
          cursor: pointer;
          img {
            width: 30px;
            height: auto;
            background-color: #fff;
            border-radius: 50%;
          }
        }
      }
    }
  }
}
</style>
